var Carousel1 = document.getElementById('Carousel1');
var Carousel2 = document.getElementById('Carousel2');
var slideItems = Carousel2.getElementsByClassName('slide-item');

var width = Carousel1.clientWidth;

var Btnleft = document.getElementsByClassName('left-btn')[0];
var Btnright = document.getElementsByClassName('right-btn')[0];

var indicator = document.getElementsByClassName('indicator')[0];
var item = document.getElementsByClassName('item');
var Highlight = [];

for (let i = 0; i < item.length; i++) {
    Highlight[i] = 0;
}

Carousel2.append(Carousel2.firstElementChild.cloneNode(true))

Carousel2.style.width = width * Carousel2.childElementCount + 'px';

for (var i = 0; i < slideItems.length; i++) {
    slideItems[i].style.width = Carousel1.clientWidth + 'px';
}

Btnleft.readOnly = true;
Btnright.readOnly = true;

Carousel2.style.transition = 'left 300ms linear';

var index = 0;
var complete = true;
itemColor();
function moveLeft(){
    index++;
    if(index == slideItems.length - 1){
        Carousel2.style.left = -index * width + 'px';
        index = 0;
        setTimeout(function (){
            Carousel2.style.transition = '';
            Carousel2.style.left = -index * width + 'px';
            setTimeout(function () {
                Carousel2.style.transition = 'left 300ms linear'
            },30)
        },300)
    }else {
        Carousel2.style.left = -index * width + 'px';
    }
    itemColor();
    setTimeout(function (){
        complete = true;
    },700)
}

function moveRight(){
    index--;
    if(index < 0){
        index = slideItems.length - 1;
        Carousel2.style.transition = ''
        Carousel2.style.left = -index * width + 'px';
        index--;
        setTimeout(function (){
            Carousel2.style.transition = 'left 300ms linear';
            Carousel2.style.left = -index * width + 'px';
        },300)
    }else {
        Carousel2.style.left = -index * width + 'px';
    }
    itemColor();
    setTimeout(function (){
        complete = true;
    },700)
}


function itemColor(){
    for (var i=0; i<item.length ; i++) {
        if(i == index) {
            item[index].style.backgroundColor = '#e0e0e0';
            Highlight[i] = 1;
        }else {
            item[i].style.backgroundColor = '#666';
            Highlight[i] = 0;
        }
    }
}

var itemis = false;

for (let j = 0; j < item.length; j++) {

    item[j].onmouseover = function () {
        clearInterval(timer)
        if(Highlight[j] == 0) {
            this.style.cursor = 'pointer';
            this.style.backgroundColor = '#e0e0e0';
            itemis = true;
        }
    }

    item[j].onmouseout = function () {
        if(itemis) {
            this.style.backgroundColor = '#666';
            itemis = false;
            clearInterval(timer)
            timer = setInterval(moveLeft, 3000)
        }
    }

    item[j].onclick = function () {
        clearInterval(timer)
        itemis = false;
        index = j;
        console.log(index)
        Carousel2.style.left = -index * width + 'px';
        itemColor();
        timer = setInterval(moveLeft, 3000)
    }
}

var timer;
timer = setInterval(moveLeft,3000)


Btnleft.onclick = function () {
    if(complete) {
        complete = false;
        clearInterval(timer);
        moveRight();
        timer = setInterval(moveLeft, 3000)
    }
}

Btnright.onclick = function () {
    if(complete) {
        complete = false;
        clearInterval(timer);
        moveLeft();
        timer = setInterval(moveLeft, 3000)
    }
}


